﻿@page
@model IndexModel
@{
    ViewData["Title"] = "Home page";
}

<link rel="stylesheet" type="text/css" href="css/login.css">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<script src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script>
<script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
<script>
    //校验用户名: 单词字符8-20位
    function checkUsername() {
        //1.获取用户名的值
        var username = $("#username").val();
        //2.定义正则表达式
        var reg_username = /^\w{4,20}$/;
        //3.判断,给出提示信息
        var flag = reg_username.test(username);

        if (flag) {
            //用户名合法
            $("#username").css("border", "");
        } else {
            //用户名非法,加一个边框
            $("#username").css("border", "1px solid red");
        }

        return flag;
    }

    //校验密码: 单词字符8-20位
    function checkPassword() {
        //1.获取用户名的值
        var password = $("#password").val();
        //2.定义正则表达式
        var reg_password = /^\w{8,20}$/;
        //3.判断,给出提示信息
        var flag = reg_password.test(password);

        if (flag) {
            //用户名合法
            $("#password").css("border", "");
        } else {
            //用户名非法,加一个边框
            $("#password").css("border", "1px solid red");
        }

        return flag;
    }


    // 7.验证码: 非空
    function checkCheck() {
        var check = $("#check").val();
        var reg_check = /\S/;
        var flag = reg_check.test(check);

        if (flag) {
            $("#check").css("border", "");
        } else {
            $("#check").css("border", "1px solid red");
        }

        return flag;
    }

    $(function () {

        //失去焦点验证
        $("#check").blur(checkCheck);
        $("#username").blur(checkUsername);
        $("#password").blur(checkPassword);

        //1.给登录按钮绑定单击事件
        $("#btn_sub").click(function () {
            //点击登录后验证验证码
            if (checkCheck() && checkUsername() && checkPassword()) {
                //2.发送ajax请求,计较表单数据
                $.post("user/login", $("#loginForm").serialize(), function (data) {
                    //data {flag:boolean,errorMsg:String}
                    //3.处理响应结果
                    if (data.flag) {
                        //登录成功
                        location.href = "index.html";
                    } else {
                        //登录失败
                        $("#errorMsg").html(data.errorMsg);
                    }
                });
            }
        });
    });
</script>


<!-- 头部 end -->
<section id="login_wrap">
    <div class="fullscreen-bg" style="background: url(images/login_bg.png);height: 532px;">

    </div>
    <div class="login-box">
        <div class="title">
            <img src="images/login_logo.png" alt="">
            <span>欢迎登录在线考试系统</span>
        </div>
        <div class="login_inner">


            <!--登录错误提示消息<div id="errorMsg" class="alert alert-danger"></div>-->
            <form id="loginForm" action="" method="post" accept-charset="utf-8">
                <input type="hidden" name="action" value="login" />
                <input id="username" name="username" type="text" placeholder="请输入用户名" autocomplete="off">
                <input id="password" name="password" type="text" placeholder="请输入密码" autocomplete="off">
                <div class="verify">
                    <input id="check" name="check" type="text" placeholder="请输入验证码" autocomplete="off">
                    <span><img src="checkCode" alt="" onclick="changeCheckCode(this)"></span>
                    <script type="text/javascript">
                        //图片点击事件
                        function changeCheckCode(img) {
                            img.src = "checkCode?" + new Date().getTime();
                        }
                    </script>
                </div>
                <div class="submit_btn">
                    <button id="btn_sub" type="button">登录</button>
                </div>
            </form>
            <div class="reg">没有账户？<a href="javascript:;">立即注册</a></div>
        </div>
    </div>
</section>

